<template>
  <view>
    <view class="content">
      <view class="sec1">
        <view
          v-if="addreslist.length == 0"
          class="addAdrees"
          @click="addAdrees"
        >
          <image
            class="img"
            src="https://www.123qifu.com/onlineimages/static/Shopping/addDress.png"
            mode=""
          />
        </view>
        <view v-else class="Adrees" @click="toAddresslist">
          <image
            class="img1"
            src="https://www.123qifu.com/onlineimages/static/Shopping/dwdz.png"
            mode=""
          />
          <view class="cen">
            <view class="top">
              收货人：{{ addreslist.name }}
              <text>{{ addreslist.phone }}</text>
            </view>
            <view class="bot"
              >收货地址：{{
                addreslist.province_name +
                addreslist.city_name +
                addreslist.area_name +
                addreslist.address_detail
              }}</view
            >
          </view>
          <image
            class="img2"
            src="https://www.123qifu.com/onlineimages/static/x92.png"
            mode=""
          />
        </view>
      </view>
      <view class="sec2">
        <view class="title">平台自营</view>
        <view class="detail">
          <image class="tup" :src="img + goodsInfo.main_image" mode="" />
          <view class="rig">
            <view class="zbt">{{ goodsInfo.name }}</view>
            <view class="botP">
              <text>￥{{ price }}</text>
              <uni-number-box
                v-model="number"
                :min="1"
                :max="num"
                @change="valChange"
              ></uni-number-box>
            </view>
          </view>
        </view>
        <view class="psfs">
          <view class="lef">配送方式</view>
          <view class="rig">
            <text v-if="freight == 0">快递 包邮</text>
            <text v-else>邮费:￥{{ freight }}</text>
            <image
              class="img"
              src="https://www.123qifu.com/onlineimages/static/x92.png"
              mode=""
            />
          </view>
        </view>
        <view class="psfs">
          <view class="lef">买家留言</view>
          <view class="rig">
            <input
              type="text"
              v-model="message"
              placeholder="选填：对本次交易的说明"
            />
          </view>
        </view>
        <view class="botPrice">
          共{{ val }}件商品
          <view class="rig">
            小计：
            <text>¥{{ total }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="footer">
      <view class="lef">
        合计：
        <text>¥{{ totals }}</text>
      </view>
      <view class="rig" @click="placeorder">去支付</view>
    </view>
    <!-- 支付方式 -->
    <uni-popup ref="popupPay" type="bottom">
      <view class="payboxs">
        <view class="selectPopup_one">
          <image
            src="https://www.123qifu.com/onlineimages/static/clos.png"
            class="clos"
            mode="widthFix"
            @click="cancells"
          ></image>
          <view class="zfje">
            支付金额：<text style="color: #c52b2e">{{ totals || "0" }}元</text>
          </view>
        </view>
        <scroll-view
          :scroll-into-view="toView"
          scroll-y="true"
          scroll-with-animation="true"
          class="scroll-y"
        >
          <view class="pop_two" @click="changeActive(0)">
            <view class="left">
              <image
                class="img"
                src="https://www.123qifu.com/onlineimages/static/yue.png"
                mode=""
              />
              <view class="col">
                <text>余额</text>
              </view>
            </view>
            <image
              v-if="actives == 0"
              class="img"
              src="https://www.123qifu.com/onlineimages/static/ridos.png"
              mode=""
            />
            <image
              v-else
              class="img"
              src="https://www.123qifu.com/onlineimages/static/rido.png"
              mode=""
            />
          </view>
          <view class="pop_two" @click="changeActive(1)">
            <view class="left">
              <image
                class="img"
                src="https://www.123qifu.com/onlineimages/static/yonj.png"
                mode=""
              />
              <view class="col">
                <text>佣金</text>
              </view>
            </view>
            <image
              v-if="actives == 1"
              class="img"
              src="https://www.123qifu.com/onlineimages/static/ridos.png"
              mode=""
            />
            <image
              v-else
              class="img"
              src="https://www.123qifu.com/onlineimages/static/rido.png"
              mode=""
            />
          </view>
          <view class="pop_two" @click="changeActive(2)">
            <view class="left">
              <image
                class="img"
                src="https://www.123qifu.com/onlineimages/static/wechat.png"
                mode=""
              />
              <view class="col">
                <text>微信</text>
              </view>
            </view>
            <image
              v-if="actives == 2"
              class="img"
              src="https://www.123qifu.com/onlineimages/static/ridos.png"
              mode=""
            />
            <image
              v-else
              class="img"
              src="https://www.123qifu.com/onlineimages/static/rido.png"
              mode=""
            />
          </view>
        </scroll-view>
        <view class="pbtn" @click="comnfirmPay">确定</view>
      </view>
    </uni-popup>
    <!-- 交易密码弹窗 -->
    <uni-popup ref="popPasword" type="bottom">
      <view class="boxs boxss">
        <view class="selectPopup_one">
          <image
            src="https://www.123qifu.com/onlineimages/static/clos.png"
            class="clos"
            mode="widthFix"
            @click="cancell"
          ></image>
          <text style="margin: 0 auto">请输入支付密码</text>
        </view>
        <validcode
          ref="pwd"
          :maxlength="6"
          :isPwd="true"
          @finish="getPwd"
        ></validcode>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue";
export default {
  data() {
    return {
      token: "",
      toView: "",
      number: 1, // 商品数量
      message: "", // 买家留言
      val: 1,
      max: 9,
      addreslist: [],
      address_id: "", // 收货地址id
      goods_id: "", // 商品id
      price: "",
      total: "",
      totals: "", // 商品单价 * 商品数量 + 运费
      goodsInfo: {},
      actives: 2, // 支付方式
      orderCode: "", //订单编号
      payment: "wx", // 支付方式
      payPassword: "", // 支付密码
      isCommission: "0", // 非必传,默认为0,是否为佣金支付:0=否,1=是
      userInfo: "",
      num: "", // 最大库存数量
      freight: "", // 邮费
      id: "", // 根据id判断选中的收货地址
      img: "https://www.123qifu.com/",
    };
  },
  components: { uniNumberBox },
  onLoad(params) {
    this.token = uni.getStorageSync("token");
    this.goodsInfo = uni.getStorageSync("goodsInfo");
    this.price = this.goodsInfo.price;
    this.total = (this.goodsInfo.price * 1).toFixed(2);
    this.goods_id = this.goodsInfo.id;
    this.num = this.goodsInfo.num;
    this.freight = this.goodsInfo.freight;
    this.totals = (this.goodsInfo.price * 1 + Number(this.freight)).toFixed(2);
    this.userInfo = uni.getStorageSync("userInfo");
    this.id = params.id;
  },
  onShow() {
    this.getAddress();
    this.getuserInfo();
  },
  methods: {
    // 获取用户信息
    async getuserInfo() {
      let that = this;
      const res = await that.$myRequest({
        url: "user/getUserInfo",
        method: "GET",
        data: {},
      });
      if (res.data.code == 1) {
        that.userInfo = res.data.data;
        uni.setStorageSync("userInfo", res.data.data);
      }
    },
    // 添加收货地址
    addAdrees() {
      uni.navigateTo({
        url: "./Receaddress",
      });
    },
    // 选择收货地址
    toAddresslist() {
      uni.navigateTo({
        url: "./addressList?check=true",
      });
    },
    // 获取收货地址
    async getAddress() {
      const res = await this.$myRequest({
        url: "address/getGoodsAddress",
        method: "POST",
      });
      if (res.data.code == 1) {
        if (this.id) {
          this.addreslist = res.data.msg.data.filter(
            (item) => item.id == this.id
          )[0];
          this.address_id = this.id;
        } else {
          if (res.data.msg.data[0]) {
            this.addreslist = res.data.msg.data[0]; // 取默认的第一条
            this.address_id = res.data.msg.data[0].id;
          } else {
            this.addreslist = [];
          }
        }
      }
    },
    valChange(val) {
      this.val = val;
      this.number = val;
      this.total = (this.goodsInfo.price * val).toFixed(2);
      this.totals = (this.goodsInfo.price * val + Number(this.freight)).toFixed(
        2
      );
    },
    // 提交订单
    async placeorder() {
      if (this.address_id == "") {
        uni.showToast({
          title: "您还没有添加收货地址~",
          icon: "none",
        });
        return;
      }
      if (this.num == 0) {
        uni.showToast({
          title: "库存为0，请购买其它商品~",
          icon: "none",
        });
        return;
      }
      if (this.number > this.num) {
        uni.showToast({
          title: "当前购买数量大于库存~",
          icon: "none",
        });
        return;
      }
      const res = await this.$myRequest({
        url: "order/addGoodsOrder",
        method: "POST",
        data: {
          address_id: this.address_id,
          goods_id: this.goods_id,
          number: this.number,
          message: this.message,
        },
      });
      if (res.data.code == 1) {
        this.orderCode = res.data.data.order_sn;
        this.$refs.popupPay.open();
      }
    },
    //选择支付方式
    changeActive(id) {
      this.actives = id;
      if (id == 0) {
        this.isCommission = 0;
      } else if (id == 1) {
        this.isCommission = 1;
      } else if (id == 2) {
        this.payment = "wx";
      }
    },
    // 确定支付
    comnfirmPay() {
      this.$refs.popupPay.close();
      if (this.actives == 0 || this.actives == 1) {
        // 判断是否设置支付密码
        if (this.userInfo.isSetPayPassword) {
          // 余额和佣金支付需要支付密码
          this.$refs.popPasword.open();
        } else {
          uni.showToast({
            title: "请先设置支付密码",
            icon: "none",
          });
          setTimeout(function () {
            uni.navigateTo({
              url: "../../orderPackages/pages/balance/balance",
            });
          }, 1000);
        }
      } else {
        this.h5Pay(); // 微信支付
      }
    },
    // 清除支付密码
    clickParent() {
      this.$refs.pwd.clear();
    },
    // 支付密码输入完成
    getPwd(val) {
      this.moneyPay(val);
    },
    async moneyPay(val) {
      const res = await this.$myRequest({
        url: "pay/moneyPay",
        method: "POST",
        data: {
          orderCode: this.orderCode,
          isCommission: this.isCommission,
          payPassword: val,
        },
      });
      if (res.data.code == 1) {
        this.cancell();
        uni.navigateTo({
          url: "../user/Myorder/payment",
        });
      } else {
        uni.showToast({
          title: res.data.msg,
          icon: "none",
        });
        this.cancell();
      }
    },
    // 微信支付
    async h5Pay() {
      let that = this;
      const datas = await this.$myRequest({
        url: "pay/wx_pay",
        method: "POST",
        data: {
          order_sn: this.orderCode, //订单号
          fromByXcx: 1,
        },
      });
      if (datas.data.code == 1) {
        wx.requestPayment({
          appId: datas.data.data.appId, //公众号名称，由商户传入
          timeStamp: datas.data.data.timeStamp, //时间戳，自1970年以来的秒数
          nonceStr: datas.data.data.nonceStr, //随机串
          package: datas.data.data.package,
          signType: datas.data.data.signType, //微信签名方式：
          paySign: datas.data.data.paySign, //微信签名
          success: function (res) {
            if (res.errMsg == "requestPayment:ok") {
              uni.request({
                url: "https://www.123qifu.com/api/pay/weixin_getList",
                method: "POST",
                header: {
                  token: that.token,
                },
                data: {
                  order_sn: that.orderCode,
                  fromByXcx: 1,
                },
                success: (res) => {
                  if (res.data.code == 1) {
                    that.text = res.data.msg;
                    that.$refs.popsuccue.open();
                  } else {
                    uni.showToast({
                      title: res.data.msg,
                      icon: "none",
                    });
                  }
                },
              });
            }
          },
          fail: function (res) {},
          complete: function (res) {},
        });
      }
    },
    // 取消
    cancell() {
      this.$refs.popupPay.close();
      this.$refs.popPasword.close();
      this.clickParent();
    },
    // 取消
    cancells() {
      this.$refs.popupPay.close();
      uni.navigateTo({
        url: "../user/Myorder/Myorder",
      });
    },
  },
};
</script>

<style lang="scss">
page {
  width: 750rpx;
  background-color: #f4f4f4;
}
.content {
  overflow: hidden;
  border-top: 20rpx solid #f4f4f4;
  .sec1 {
    width: 100%;
    height: 200rpx;
    background: #fff;
    box-sizing: border-box;
    padding: 20rpx;
    border-bottom: 20rpx solid #eeeeee;
    overflow: hidden;
    .addAdrees {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .img {
        display: block;
        width: 430rpx;
        height: 80rpx;
      }
    }
    .Adrees {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 30rpx;
      .img1 {
        display: block;
        width: 62rpx;
        height: 74rpx;
        margin-right: 40rpx;
      }
      .cen {
        width: 500rpx;
        .top {
          font-size: 30rpx;
          font-weight: 550;
          color: #373737;
          text {
            margin-left: 20rpx;
          }
        }
        .bot {
          font-size: 26rpx;
          font-weight: 400;
          color: #999999;
          margin-top: 15rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
      .img2 {
        display: block;
        width: 12rpx;
        height: 20rpx;
        margin-left: 10rpx;
      }
    }
  }
  .sec2 {
    width: 100%;
    min-height: 400rpx;
    box-sizing: border-box;
    padding: 0 30rpx 28rpx;
    background: #ffff;
    .title {
      height: 88rpx;
      display: flex;
      align-items: center;
      font-size: 30rpx;
      color: #333333;
      font-weight: bold;
      box-sizing: border-box;
      border-bottom: 1px solid #eee;
    }
    .detail {
      width: 100%;
      box-sizing: border-box;
      padding: 30rpx 0;
      display: flex;
      position: relative;
      border-bottom: 1px solid #eee;
      .tup {
        display: block;
        width: 180rpx;
        height: 180rpx;
        border-radius: 4rpx;
        margin-right: 25rpx;
      }
      .rig {
        width: 70%;
        height: 180rpx;
        position: relative;
        .zbt {
          width: 100%;
          font-size: 28rpx;
          color: #333333;
          font-weight: bold;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: break-all;
        }
        .fbt {
          font-size: 25rpx;
          color: #999999;
          margin-top: 10rpx;
        }
        .botP {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          text {
            font-size: 28rpx;
            color: #c52b2e;
            font-weight: bold;
          }
        }
      }
    }
    .psfs {
      width: 100%;
      box-sizing: border-box;
      padding: 30rpx 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      border-bottom: 1px solid #eee;
      .lef {
        font-size: 26rpx;
        color: #333333;
      }
      .rig {
        display: flex;
        align-items: center;
        flex: 1;
        justify-content: flex-end;
        input {
          flex: 1;
          box-sizing: border-box;
          padding-left: 20rpx;
          text-align: right;
          font-size: 26rpx;
          color: #333333;
        }
        text {
          font-size: 26rpx;
          color: #333333;
        }
        .img {
          display: block;
          width: 12rpx;
          height: 20rpx;
          margin-left: 10rpx;
        }
      }
    }
    .botPrice {
      width: 100%;
      box-sizing: border-box;
      padding: 25rpx 0 10rpx;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-size: 26rpx;
      color: #333333;
      .rig {
        margin-left: 20rpx;
        display: flex;
        align-items: center;
        text {
          font-size: 30rpx;
          color: #c52b2e;
          font-weight: bold;
        }
      }
    }
  }
}
.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 30rpx;
  .lef {
    display: flex;
    align-items: center;
    font-size: 30rpx;
    color: #333333;
    font-weight: bold;
    box-sizing: border-box;
    padding: 0 30rpx;
    text {
      font-size: 30rpx;
      color: #c52b2e;
      font-weight: bold;
    }
  }
  .rig {
    width: 250rpx;
    height: 74rpx;
    text-align: center;
    line-height: 74rpx;
    font-size: 30rpx;
    color: #ffffff;
    font-weight: 500;
    background: #c52b2e;
    border-radius: 37px;
  }
}
.payboxs {
  width: 100%;
  height: 700rpx;
  background-color: #ffffff;
  border-radius: 40rpx 40rpx 0 0;
  position: relative;
  z-index: 999;
  .zfje {
    font-size: 34rpx;
    font-weight: 500;
    color: #333333;
    text-align: center;
    padding: 30rpx;
  }
  .selectPopup_one {
    display: flex;
    align-items: center;
    height: 40rpx;
    width: 100%;
    font-size: 28rpx;
    color: #333333;
    padding: 24rpx 0;
    border-bottom: 1rpx solid #e0e0e0;
    position: relative;
    .clos {
      width: 24rpx;
      position: relative;
      left: 39rpx;
    }
    .zfje {
      width: 100%;
      text-align: center;
    }
  }
  .pop_two {
    width: 690rpx;
    height: 100rpx;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    .left {
      font-size: 30rpx;
      color: #333333;
      display: flex;
      align-items: center;
      .img {
        display: block;
        width: 60rpx;
        height: 60rpx;
        margin-right: 20rpx;
      }
      .col {
        text {
          display: block;
          font-size: 28rpx;
          font-weight: 400;
          color: #333333;
        }
      }
    }
    > .img {
      display: block;
      width: 34rpx;
      height: 34rpx;
    }
  }
  .pop_two:last-of-type {
    border-bottom: none;
  }
  .pbtn {
    width: 250rpx;
    height: 66rpx;
    text-align: center;
    line-height: 66rpx;
    background: #c52b2e;
    border-radius: 40rpx;
    font-size: 30rpx;
    color: #ffffff;
    margin: 70rpx auto 0;
  }
}
.boxs {
  width: 100%;
  height: 1000rpx;
  background-color: #ffffff;
  border-radius: 40rpx 40rpx 0 0;
  &.boxss {
    height: 500rpx;
    .selectPopup_one {
      margin-bottom: 50rpx;
      text {
        font-size: 34rpx;
        font-weight: 500;
        color: #333333;
      }
    }
  }
  .selectPopup_one {
    display: flex;
    align-items: center;
    height: 40rpx;
    width: 100%;
    font-size: 28rpx;
    color: #333333;
    padding: 24rpx 0;
    border-bottom: 1rpx solid #e0e0e0;
    position: relative;
    .clos {
      width: 24rpx;
      position: relative;
      left: 39rpx;
    }
  }
  .scroll-y {
    height: 90%;
  }
  .xiaofei {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 690rpx;
    margin: 50rpx auto 0;
    padding-bottom: 40rpx;
    border-bottom: 1px dashed;
    .fukuan {
      display: flex;
      align-items: center;
    }
  }
  .xiaofei:last-of-type {
    border-bottom: none;
  }
}
</style>
